{% extends 'ApplicationToolsBundle::layout12.html.twig' %}

{% block title %}Font Bootstrap{% endblock %}

{% block stylesheets %}    
    <link href="{{ asset('bundles/applicationtools/css/fonts/font-bootstrap/font-bootstrap.css') }}" rel="stylesheet" type="text/css" media="all" />
    <style type="text/css">
.bootstrap-icons .cell{
    cursor: pointer;
    font-size: 14px;
    padding: 5px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}
.bootstrap-icons .cell:hover{
    background: #76ad14;
    color: #fff;
}
.bootstrap-icons .cell .glyphicon{
    display: block;
    width: 32px;
    height: 32px;
    margin: auto;
    text-align: center;
    font-size: 21px;
}
.bootstrap-icons .cell:hover .glyphicon{
    font-size: 28px;
    -webkit-transition  : all 400ms ease-out;
    -moz-transition     : all 400ms ease-out;
    -o-transition       : all 400ms ease-out;
    -ms-transition      : all 400ms ease-out;
    transition          : all 400ms ease-out;
}
.bootstrap-icons .glyphicon-class{
    display: block;
    text-align: center;
    height: 65px;
    line-height: 20px;
    word-wrap: break-word;
    padding-top: 5px;
}
    </style>
{% endblock %}

{% block javascripts %}

{% endblock %}

{% block body %}

<div class="grid_row">
    <div class="grid_12">
        <h3>Bootstrap icons</h3>
        <h6>
            <a href="http://getbootstrap.com/components/" target="_blank">Font Bootstrap</a>,
            <a href="https://github.com/twbs/bootstrap/" target="_blank">github</a>
        </h6>
        <p>Po wrzuceniu nowej paczki z czcionkami musimy wyczyścić cache przeglądarki.</p>
    </div>
    <div class="clear"></div>
</div>

<div class="row bootstrap-icons">
    <div class="col_10">
		<div class="cell">
			<span class="glyphicon glyphicon-asterisk"></span>
			<span class="glyphicon-class">glyphicon glyphicon-asterisk</span>
		</div>
    </div>
    <div class="col_10">
		<div class="cell">
			<span class="glyphicon glyphicon-plus"></span>
			<span class="glyphicon-class">glyphicon glyphicon-plus</span>
		</div>
    </div>
    <div class="col_10">
		<div class="cell">
			<span class="glyphicon glyphicon-euro"></span>
			<span class="glyphicon-class">glyphicon glyphicon-euro</span>
		</div>
    </div>
    <div class="col_10">
		<div class="cell">
			<span class="glyphicon glyphicon-minus"></span>
			<span class="glyphicon-class">glyphicon glyphicon-minus</span>
		</div>
    </div>
    <div class="col_10">
		<div class="cell">
			<span class="glyphicon glyphicon-cloud"></span>
			<span class="glyphicon-class">glyphicon glyphicon-cloud</span>
		</div>
    </div>
    <div class="col_10">
		<div class="cell">
			<span class="glyphicon glyphicon-envelope"></span>
			<span class="glyphicon-class">glyphicon glyphicon-envelope</span>
		</div>
    </div>
    
    <div class="col_10">
		<div class="cell">
			<span class="glyphicon glyphicon-pencil"></span>
			<span class="glyphicon-class">glyphicon glyphicon-pencil</span>
		</div>
    </div>
    <div class="col_10">
		<div class="cell">
			<span class="glyphicon glyphicon-glass"></span>
			<span class="glyphicon-class">glyphicon glyphicon-glass</span>
		</div>
    </div>
    <div class="col_10">
		<div class="cell">
			<span class="glyphicon glyphicon-music"></span>
			<span class="glyphicon-class">glyphicon glyphicon-music</span>
		</div>
    </div>
    <div class="col_10">
		<div class="cell">
			<span class="glyphicon glyphicon-search"></span>
			<span class="glyphicon-class">glyphicon glyphicon-search</span>
		</div>
    </div>
    <div class="col_10">
		<div class="cell">
			<span class="glyphicon glyphicon-heart"></span>
			<span class="glyphicon-class">glyphicon glyphicon-heart</span>
		</div>
    </div>
    <div class="col_10">
		<div class="cell">
			<span class="glyphicon glyphicon-star"></span>
			<span class="glyphicon-class">glyphicon glyphicon-star</span>
		</div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-star-empty"></span>
            <span class="glyphicon-class">glyphicon glyphicon-star-empty</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-user"></span>
            <span class="glyphicon-class">glyphicon glyphicon-user</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-film"></span>
            <span class="glyphicon-class">glyphicon glyphicon-film</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-th-large"></span>
            <span class="glyphicon-class">glyphicon glyphicon-th-large</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-th"></span>
            <span class="glyphicon-class">glyphicon glyphicon-th</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-th-list"></span>
            <span class="glyphicon-class">glyphicon glyphicon-th-list</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-ok"></span>
            <span class="glyphicon-class">glyphicon glyphicon-ok</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-remove"></span>
            <span class="glyphicon-class">glyphicon glyphicon-remove</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-zoom-in"></span>
            <span class="glyphicon-class">glyphicon glyphicon-zoom-in</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-zoom-out"></span>
            <span class="glyphicon-class">glyphicon glyphicon-zoom-out</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-off"></span>
            <span class="glyphicon-class">glyphicon glyphicon-off</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-signal"></span>
            <span class="glyphicon-class">glyphicon glyphicon-signal</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-cog"></span>
            <span class="glyphicon-class">glyphicon glyphicon-cog</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-trash"></span>
            <span class="glyphicon-class">glyphicon glyphicon-trash</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-home"></span>
            <span class="glyphicon-class">glyphicon glyphicon-home</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-file"></span>
            <span class="glyphicon-class">glyphicon glyphicon-file</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-time"></span>
            <span class="glyphicon-class">glyphicon glyphicon-time</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-road"></span>
            <span class="glyphicon-class">glyphicon glyphicon-road</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-download-alt"></span>
            <span class="glyphicon-class">glyphicon glyphicon-download-alt</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-download"></span>
            <span class="glyphicon-class">glyphicon glyphicon-download</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-upload"></span>
            <span class="glyphicon-class">glyphicon glyphicon-upload</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-inbox"></span>
            <span class="glyphicon-class">glyphicon glyphicon-inbox</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-play-circle"></span>
            <span class="glyphicon-class">glyphicon glyphicon-play-circle</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-repeat"></span>
            <span class="glyphicon-class">glyphicon glyphicon-repeat</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-refresh"></span>
            <span class="glyphicon-class">glyphicon glyphicon-refresh</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-list-alt"></span>
            <span class="glyphicon-class">glyphicon glyphicon-list-alt</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-lock"></span>
            <span class="glyphicon-class">glyphicon glyphicon-lock</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-flag"></span>
            <span class="glyphicon-class">glyphicon glyphicon-flag</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-headphones"></span>
            <span class="glyphicon-class">glyphicon glyphicon-headphones</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-volume-off"></span>
            <span class="glyphicon-class">glyphicon glyphicon-volume-off</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-volume-down"></span>
            <span class="glyphicon-class">glyphicon glyphicon-volume-down</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-volume-up"></span>
            <span class="glyphicon-class">glyphicon glyphicon-volume-up</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-qrcode"></span>
            <span class="glyphicon-class">glyphicon glyphicon-qrcode</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-barcode"></span>
            <span class="glyphicon-class">glyphicon glyphicon-barcode</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-tag"></span>
            <span class="glyphicon-class">glyphicon glyphicon-tag</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-tags"></span>
            <span class="glyphicon-class">glyphicon glyphicon-tags</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-book"></span>
            <span class="glyphicon-class">glyphicon glyphicon-book</span>
        </div>
    </div>
    <div class="col_10">
        <div class="cell">
            <span class="glyphicon glyphicon-bookmark"></span>
            <span class="glyphicon-class">glyphicon glyphicon-bookmark</span>
        </div>
    </div>
</div>

{% endblock %}